/*
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-09-14 09:22:57
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2024-10-16 12:59:23
 * @FilePath: /blog/src/direvtive/loading.ts
 */
// 在你的 Vue 应用中的 directives.js 或类似文件
import Img from '@/assets/images/common/loading.svg';
import type { App } from 'vue';

function createLoading(el: HTMLElement, isShow: boolean) {
  if (el.querySelector('#loading-view')) {
    el.removeChild(el.querySelector('#loading-view'));
  }

  const loadingView = document.createElement('div');
  loadingView.id = 'loading-view';
  loadingView.style.position = 'absolute';
  loadingView.style.top = '50%';
  loadingView.style.left = '50%';
  loadingView.style.transform = 'translate(-50%, -50%)';
  loadingView.style.width = '100%';
  loadingView.style.height = '100%';
  loadingView.style.maxWidth = '140px';
  loadingView.style.maxHeight = '160px';

  const img = document.createElement('img');
  img.src = Img;
  img.style.width = '100%';
  img.style.height = 'calc(100% - 30px)';
  img.style.margin = 'auto';
  img.style.display = 'block';

  const loadingText = document.createElement('p');
  loadingText.textContent = 'Loading...';
  loadingText.style.height = '20px';
  loadingText.style.textAlign = 'center';
  loadingText.style.color = '#999';

  loadingView.appendChild(img);
  loadingView.appendChild(loadingText);
  el.appendChild(loadingView);
  if (isShow) {
    loadingView.style.display = 'block';
  } else {
    loadingView.style.display = 'none';
  }
}

const loadingDirective = {
  beforeMount(el: HTMLElement, binding: any) {
    if (binding.value) {
      el.style.setProperty('position', 'relative'); // 防止元素被覆盖
      createLoading(el, true);
    }
  },
  updated(el: HTMLElement, binding: any) {
    if (binding.value) {
      el.style.setProperty('position', 'relative'); // 防止元素被覆盖
      createLoading(el, true);
    } else {
      el.style.setProperty('position', 'relative'); // 防止元素被覆盖
      createLoading(el, false);
    }
  }
};

// 注册自定义指令
export default {
  install(app: App) {
    app.directive('loading', loadingDirective);
  }
};
